<template>
    <div style="margin-left: 10px">
      <CheckboxGroup>
        <Checkbox
          class="checkbox-style"
          :indeterminate="indeterminate"
          :value="checkAll"
          :label="singleList.title"
          @click.prevent.native="handleCheckAll(singleList.child)"><span style="font-weight: 600;">{{title}}</span>
        </Checkbox>
      </CheckboxGroup>
	  
      <CheckboxGroup v-model="checkAllSingleGroup" @on-change="checkAllSingleGroupChange">
        <Checkbox  class="checkbox-style" style="margin-left: 20px"
                   v-for="single in singleList.child"
                   :key="single.id"
                   :label="single.id">
          <span>{{single.title}}</span>
        </Checkbox>
      </CheckboxGroup>
	  
    </div>
</template>
<script>
export default {
  props: ['singleList', 'title', 'icon', 'checkedAuth'],
  data () {
    return {
      checkboxSize: 0,
      indeterminate: false,
      checkAll: false,
      checkAllSingleGroup: [],
      newArr: []
    }
  },
  watch: {
    'checkAllSingleGroup': function (val) {
      this.$emit('checkedChild', this.icon, val)
    },
    'checkedAuth': function (val) {
      // console.log(val)
      this.checkAllSingleGroup = []
      this.singleList._child.forEach(item => {
        val.map(value => {
          if (value === item.name) {
            this.checkAllSingleGroup.push(value)
          }
        })
      })
      this.checkAllSingleGroupChange(this.checkAllSingleGroup)
    }
  },
  methods: {
    handleCheckAll (arr) {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      let singleCheckedGroup = []
      let singleObj = {}
      if (!Array.isArray(arr)) {
        return
      }
      if (arr.length === 0) {
        this.$emit('checkedMenuChange', this.icon, this.checkAll)
        return
      }
      for (let i = 0; i < arr.length; i++) {
        singleObj = arr[i]
        singleCheckedGroup.push(singleObj.name)
      }
 
      if (this.checkAll) {
        this.checkAllSingleGroup = singleCheckedGroup
      } else {
        this.checkAllSingleGroup = []
      }
    },
    checkAllSingleGroupChange (data) {
      if (data.length === this.singleList._child.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    }
  }
}
</script>